<%--
  Created by IntelliJ IDEA.
  User: 45514
  Date: 2021/7/22
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="statics/css/login.css">
</head>
<script>
    //账号存在性异步校验
    function onBlur() {
        var account = $('#usernameInfo')
        $.post({
            url: "${pageContext.request.contextPath}/user/check_username",
            data: {username: $('#account').val()},
            success: function (data) {
                console.log(data);
                if (data === "ok") {
                    account.css("color", "green");

                } else {
                    account.css("color", "red");
                }
                account.html(data);
            }
        })
    }
</script>

<body>
<div align="center">
    <div id="img"><img src="statics/images/login.png" alt=""></div>
    <fieldset>
        <legend>登录 | LOGIN</legend>
        <form id="form_login" method="post" action="${pageContext.request.contextPath}/user/login">
            账号：<input id="account" type="text" name="username" placeholder="请输入账号" value="" onblur="onBlur()">
            <span id="usernameInfo"></span>
            <p></p>
            密码：<input id="password" type="password" name="password" placeholder="请输入密码">
            <p></p>
            验证码：<input id="number" type="text" name="verify">
            <div id="verifyNum">获取验证码</div>
            <p></p><!--拼接后的验证码-->
            <input type="submit" class="btn" value="登录">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" class="btn" value="重置">
        </form>
    </fieldset>
</div>

<%--验证码生成--%>
<script>
    var code_box = document.getElementById("verifyNum");

    function refreshCode() {
        var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',//62个字符 随机选择4位
            char = '',
            result = '';
        for (var i = 0; i < 4; i++) {
            //随机选择一位  （0,61） 写出0到61的随机的索引数字
            var code_index = Math.round(Math.random() * 61);
            //得到随机的索引  取出随机地字符
            char = code[code_index];
            //随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。
            // 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次
            if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)
                //indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符
            {
                i--;
                //为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了
                //到最后会少一个字符 缺席
                continue;//终止本轮循环 进行下一轮
            }
            result += char;
        }
        code_box.innerHTML = result;
        // document.getElementById("number").value = result;
    }

    //点击事件
    code_box.onclick = refreshCode;
</script>

</body>
</html>